<template>
    <div style="width:100%;">
        <div class="configTable">
            <li class="costItemTitle">费项</li>
            <div class="addCostList">
                <el-button size="small" @click="addCostDialog=true">+ 新增费项类型</el-button>
                <el-button type="warning" @click="editCostItem(0);dragDisable = false" class="el-icon-edit"
                    size="small">编辑</el-button>
            </div>
            <template v-for="(item,index) in configList">
                <div :key="item.id" class="configItem" v-if="!item.del">
                    <span class="parentItem"><span @click="delCostItem(item)" class="iconClose"
                            :class="{'el-icon-close':!dragDisable}"></span>{{item.id}} - {{item.name}}</span>
                    <div :disabled="dragDisable" class="costItemList" :list="item.children" @end="dragEnd(index)"
                        group="costItem">
                        <template  v-for="(item1) in item.children">
                            <div v-if="!item1.del" :key="item1.id">
                                <div class="itemList" @click="updateItem(item1)" :title="item1.id">
                                    <div>{{item1.id}}</div>
                                    <div>{{item1.name}}</div>
                                </div>
                                <span v-if="!flag" @click="delCostItem(item1)" class="el-icon-close"></span>
                            </div>
                        </template>
                    </div>
                    <span class="addMoney" v-if="!dragDisable" @click="addList(item)">新增</span>
                </div>
            </template>
        </div>
        <div class="btn">
            <el-button v-show="!flag" @click="restore();dragDisable = true">取 消</el-button>
            <el-button v-show="!flag" @click="remove();dragDisable = true">保 存</el-button>
        </div>

        <!-- 费项 -->
        <el-dialog title="新增费项类型" :visible.sync="addCostDialog" width="30%">
            <el-form ref="addForm" :model="addForm" :rules="rules" label-width="120px">
                <el-form-item label="收费科目ID" prop="id">
                    <el-input v-model.trim="addForm.id"></el-input>
                </el-form-item>
                <el-form-item label="收费科目名称" prop="name">
                    <el-input v-model.trim="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序编号" prop="sortValue">
                    <el-input v-model.number.trim="addForm.sortValue"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click='addCostDialog = false,addForm={parentId:"",name:"",id:"",sortValue:1}'>取 消
                </el-button>
                <el-button type="primary" @click="addCostItemType('addForm')">新 增</el-button>
            </span>
        </el-dialog>

        <!-- 费项列表 -->
        <el-dialog :title="updateFlag?'修改科目':'新增科目'" :visible.sync="addCostListDialog" width="30%">
            <el-form ref="addListForm" :model="addListForm" :rules="rules" label-width="120px">
                <el-form-item label="收费大类标识" prop="parentId">
                    <el-input disabled v-model.trim="addListForm.parentId"></el-input>
                </el-form-item>
                <el-form-item label="编号ID" prop="id">
                    <el-input :disabled="updateFlag" v-model.trim="addListForm.id"></el-input>
                </el-form-item>
                <el-form-item label="收费科目名称" prop="name">
                    <el-input v-model.trim="addListForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序编号" prop="sortValue">
                    <el-input v-model.number.trim="addListForm.sortValue"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="reset()">取 消
                </el-button>
                <el-button type="primary" @click="addCostListItem('addListForm')">{{updateFlag?'修 改':'新 增'}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
// import draggable from 'vuedraggable';
import {
    addCostItem,
    updateCostItem,
    getCostItemList,
    deleteCostItem,
} from '../../url/api';
export default {
    data() {
        return {
            dragDisable: true,
            delArr: [],
            costItemFlag: {},
            updateFlag: false,
            updateObj: {}, //修改费项列表 or 类型
            addForm: {
                //增加费项类型
                parentId: '',
                name: '',
                id: '',
                sortValue: 1,
            },
            addListForm: {
                //增加费项列表
                id: '',
                parentId: '',
                name: '',
                sortValue: 1,
            },
            addCostDialog: false,
            addCostListDialog: false,
            flag: 1, //1xiug
            disable: true,
            rules: {
                parentId: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ],
                id: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ],
                name: [
                    {
                        required: true,
                        message: '该项不能为空',
                        trigger: 'blur',
                    },
                ],
                sortValue: [
                    { required: true, message: '该项不能为空' },
                    { type: 'number', message: '该项必须为数字' },
                ],
            },
            configList: [],
            restoreArr: [],
        };
    },
    methods: {
        dragEnd(index) {
            console.log(index);
        },
        updateItem(item) {
            if (this.dragDisable) return;
            this.addListForm = item;
            this.addCostListDialog = true;
            this.updateFlag = true;
            console.log(this.updateObj);
        },
        remove() {
            this.addCostListDialog = false;
            this.flag = true;
            this.updateFlag = false;
            if (!this.delArr.length) return;
            deleteCostItem(this.delArr).then((res) => {
                if (res.data.code == 200) {
                    this.$message.success('删除成功');
                    this.delArr = [];
                    this.getList();
                }
            });
        },
        //取消删除
        restore() {
            this.configList = JSON.parse(JSON.stringify(this.restoreArr));
            this.delArr = [];
            this.disable = false;
            this.flag = true;
            this.updateFlag = false;
        },
        addList(item) {
            this.costItemFlag = item;
            this.addListForm = this.$options.data().addListForm;
            this.addListForm.parentId = item.id;
            console.log(this.addListForm.parentId);
            this.addCostListDialog = true;
            this.updateFlag = false;
        },
        // 新增费项列表
        addCostListItem(addListForm) {
            this.$refs[addListForm].validate((valid) => {
                if (valid) {
                    delete this.addListForm.builtIn;
                    delete this.addListForm.children;
                    delete this.addListForm.del;
                    if (this.updateFlag) {
                        updateCostItem([this.addListForm]).then((res) => {
                            console.log(res.data);
                            if (res.data.code == 200) {
                                this.$message.success('修改成功');
                                this.getList();
                                this.reset();
                                this.addCostDialog = false;
                            }
                        });
                    } else {
                        addCostItem(this.addListForm).then((res) => {
                            console.log(res.data);
                            if (res.data.code == 200) {
                                this.$message.success('添加成功');
                                this.getList();
                                this.reset();
                            }
                        });
                        this.addCostDialog = false;
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 新增费项类型
        addCostItemType(addForm) {
            this.$refs[addForm].validate((valid) => {
                if (valid) {
                    this.addForm.parentId = this.addForm.id;
                    addCostItem(this.addForm).then((res) => {
                        if (res.data.code == 200) {
                            this.$message.success('新增成功');
                            this.addForm = {
                                parentId: '',
                                name: '',
                                id: '',
                                sortValue: 1,
                            };
                            this.getList();
                        }
                    });
                    this.addCostDialog = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        reset() {
            this.addCostListDialog = false;
            this.addListForm = { id: '', parentId: '', name: '', sortValue: 1 };
        },
        //删除费项子类列表
        delCostItem(item) {
            item.del = true;
            this.delArr.push(item.id);
        },
        //修改
        editCostItem(v) {
            this.flag = v;
            if (this.flag) {
                document
                    .querySelector('.configTable')
                    .style.setProperty('--edit', '#41c8ee');
                this.disable = true;
            } else {
                this.disable = false;
                this.updateFlag = true;
            }
        },
        //新增费项列表
        addCostList() {
            this.configList.push({
                id: this.getRandomID(),
                label: '',
                children: [
                    {
                        id: this.getRandomID(),
                        value: '',
                    },
                ],
            });
        },
        //获取id
        getRandomID() {
            //随机id
            return (
                (((1 + Math.random()) * 0x10000) | 0)
                    .toString(16)
                    .substring(1) +
                (((1 + Math.random()) * 0x10000) | 0)
                    .toString(16)
                    .substring(1) +
                '-' +
                (((1 + Math.random()) * 0x10000) | 0)
                    .toString(16)
                    .substring(1) +
                '-' +
                (((1 + Math.random()) * 0x10000) | 0)
                    .toString(16)
                    .substring(1) +
                '-' +
                (((1 + Math.random()) * 0x10000) | 0)
                    .toString(16)
                    .substring(1) +
                '-' +
                (((1 + Math.random()) * 0x10000) | 0)
                    .toString(16)
                    .substring(1) +
                (((1 + Math.random()) * 0x10000) | 0)
                    .toString(16)
                    .substring(1) +
                (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
            );
        },
        getList() {
            getCostItemList().then((res) => {
                if (res.data.code == 200) {
                    res.data.data.forEach((item) => {
                        item.del = false;
                        item.children &&
                            item.children.forEach((item1) => {
                                item1.del = false;
                            });
                    });
                    this.configList = JSON.parse(JSON.stringify(res.data.data));
                    this.restoreArr = JSON.parse(JSON.stringify(res.data.data));
                }
            });
        },
    },
    mounted() {
        this.getList();
    },
    components: {
        // draggable,
    },
};
</script>
<style lang="scss" scoped>
.configTable {
    --edit: #41c8ee;
    display: inline-block;
    width: 80%;
    // border: 1px solid;
    // margin: 5% 0 0 10%;
    background: rgba($color: #909399, $alpha: 0.72);
    padding: 76px;
    margin: 3% 0 0 6%;
    .costItemTitle,
    .addCostList {
        display: inline-block;
        width: 48%;
        list-style: circle;
        font-size: 20px;
        text-indent: 0.06rem;
        margin-bottom: 10px;
    }
    .iconClose {
        display: inline-block;
        width: 20px;
        cursor: pointer;
    }
    .addCostList {
        text-align: right;
        font-size: 16px;
    }

    .configItem {
        width: 100%;
        // height: 54px;
        // line-height: 54px;
        display: flex;
        flex-flow: wrap;
        align-items: center;
        font-size: 18px;
        // border: 1px solid var(--edit);
        color: var(--edit);
        .parentItem {
            display: inline-block;
            width: 160px;
            text-align: center;
            // padding: 0 20px;
            border-right: 2px solid #41c8ee;
            margin-right: 20px;
        }
        .addMoney {
            height: 34px;
            line-height: 34px;
            width: 54px;
            text-align: center;
            background: var(--edit);
            border-radius: 10px;
            cursor: pointer;
            color: white;
            transform: scale(0.8);
        }
        .labelId {
            &::-webkit-input-placeholder {
                color: var(--edit);
            }
            display: inline-block;
            width: 70px;
            border: 0;
            border-right: 1px solid #40c3e8;
        }
        .labelItem {
            &::-webkit-input-placeholder {
                color: var(--edit);
            }
            box-sizing: border-box;
            text-align: center;
            flex: 1;
            // background: #0f59ab;
            margin-right: 20px;
            border-right: 1px solid var(--edit);
        }
        .costItemList {
            flex: 9;
            // height: 54px;
            line-height: 34px;
            padding: 10px;

            & > div {
                display: inline-block;
                // background: var(--edit);
                background: #3c78b7;
                // height: 40px;
                // line-height: 40px;
                margin-right: 10px;
                // width: 124px;
                position: relative;
                border-radius: 6px;
                padding: 4px 20px;
                div {
                    display: inline-block;
                    width: 100%;
                    color: #fff;
                    text-align: center;
                }
            }
            & > div > span {
                position: absolute;
                right: 0px;
                top: 0px;
                color: #fff;
                cursor: pointer;
                font-size: 16px;
            }
            .costItem {
                display: inline-block;
                width: 80px;
                min-width: 80px;
                max-width: 160px;
                font-size: 18px;
                height: 40px;
                line-height: 40px;
                border-radius: 5px;
                // padding: 0 18px;
                // background: skyblue;
                color: #fff;
                margin: 0 10px;
                cursor: pointer;
                text-align: center;
                border: 0;
                &::-webkit-input-placeholder {
                    color: #fff;
                }
            }
            & > div > input {
                padding-left: 6px;
            }

            & .itemList {
                font-size: 14px;
                display: flex;
                flex-direction: column;
                div {
                    width: 100%;
                    height: 20px;
                    line-height: 20px;
                }
            }
        }
    }
    .configItem:nth-child(1) {
        border-top: 1px solid;
    }
    .configItem:nth-child(odd) {
        background: #1a5480;
    }
    .configItem:nth-child(even) {
        background: #0e3a5a;
    }
}
.btn {
    text-align: center;
    margin-top: 30px;
}
</style>